$(function () {
  machineRoomPie();
  securityPie();
  terminalBar();
  IOTBar();
});

// function Bar() {
//   var myChart = echarts.init(document.getElementById('classChart'));

//   myChart.setOption(option);
// }

// 机房设备
function machineRoomPie() {
  var myChart = echarts.init(document.getElementById('machineRoom'));
  option = {
    title: {
    },
    color:['#fc9a00','#00ade6','#0065b4','#00b418'],
    legend: {
      orient: 'vertical',
      icon:'rect',
      itemWidth:10,
      itemHeight:10,
      align: 'left',
      right: '15%',
      top: 'middle',
      itemGap: 15,
      textStyle: {
        color: '#fff',
      },
      //图例属性，以饼状图为例，用来说明饼状图每个扇区，data与下边series中data相匹配
      data: ['交换机', '交换机2','服务器', '服务器2' ]
    },
    series: [
      {
        name: '机房设备',
        type: 'pie',
        radius: ['0%','65%'], // 控制内外半径的起始点
        center: ['35%', '50%'], // 图在容器的位置
        left: 'left',
        hoverAnimation: false,
        label: {
          color: '#fff',
          formatter: function (params) {
            return params.data.value + '台'
          }
        },
        data: [{
          value: 25,
          name:'交换机',
        }, {
          value: 45,
          name:'交换机2',
        },{
          value: 20,
          name:'服务器',
        }, {
          value: 10,
          name:'服务器2',
        }],
      }
    ]
  }
  myChart.setOption(option);
}

// 安防设备
function securityPie() {
  var myChart = echarts.init(document.getElementById('security'));
  option = {
    title: {
    },
    color:['#fc9a00','#00c3ce','#00ade6','#0065b4','#00b418'],
    legend: {
      orient: 'vertical',
      icon:'rect',
      itemWidth:10,
      itemHeight:10,
      align: 'left',
      right: '10%',
      top: 'middle',
      itemGap: 15,
      textStyle: {
        color: '#fff',
      },
      //图例属性，以饼状图为例，用来说明饼状图每个扇区，data与下边series中data相匹配
      data: ['摄像头', '硬盘录像机','面板机', '其他设备' ]
    },
    series: [
      {
        name: '安防设备',
        type: 'pie',
        radius: ['40%','65%'], // 控制内外半径的起始点
        center: ['35%', '50%'], // 图在容器的位置
        left: 'left',
        hoverAnimation: false,
        label: {
          color: '#fff',
          formatter: function (params) {
            return params.data.value + '台'
          }
        },
        data: [{
          value: 25,
          name:'摄像头',
        }, {
          value: 35,
          name:'硬盘录像机',
        },{
          value: 25,
          name:'面板机',
        }, {
          value: 15,
          name:'其他设备',
        }],
      }
    ]
  }
  myChart.setOption(option);
}

// 终端设备
function terminalBar() {
  var myChart = echarts.init(document.getElementById('terminal'));
  option = {
    title: {
      
    },
    color: ['#00ebd8'], // 必须在上面
    grid: {   // 直角坐标系内绘图网格
      left: '5%',  //grid 组件离容器左侧的距离
      top: '20%',
      right: '5%',
      bottom: '10%',
      containLabel: true   //gid区域是否包含坐标轴的刻度标签。为true的时候，
      // left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
      //所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
    },
    tooltip: {},
    xAxis: {
      name: '',
      type: 'category',
      axisLine: { // 坐标轴轴线 
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: { // 坐标轴刻度
        show: false
      },
      axisLabel: {
        fontSize: 10
      },
      data: ['台式机', '笔记本', 'IP电话', '电视机', '会议终端','终端组件','打印机']
    },
    yAxis: {
      name: '数量 (台)',
      type: 'value',
      min: 0,
      max: 200,
      interval: 40,
      splitLine: {show: false}, // grid 区域中的分隔线
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      }
    },
    series: [
      {
        name: '',
        type: 'bar',
        barWidth: 20,
        data: [160, 120, 80, 100, 150, 120, 160]
      }
    ]
  };
  myChart.setOption(option);
}

// IOT设备
function IOTBar() {
  var myChart = echarts.init(document.getElementById('IOT'));
  option = {
    title: {
      
    },
    grid: {   // 直角坐标系内绘图网格
      left: '5%',  //grid 组件离容器左侧的距离
      top: '20%',
      right: '5%',
      bottom: '5%',
      containLabel: true   //gid区域是否包含坐标轴的刻度标签。为true的时候，
      // left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
      //所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
    },
    tooltip: {},
    xAxis: {
      name: '',
      type: 'category',
      axisLine: { // 坐标轴轴线 
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: { // 坐标轴刻度
        show: false
      },
      axisLabel: {
        rotate:25,
        fontSize: 10,
        padding: [10, 0, 0, 0]
      },
      data: ['采集设备', '传感器-天气', '传感器-电力', '灯光控制器', '空调控制器','其他传感器']
    },
    yAxis: {
      name: '数量 (台)',
      type: 'value',
      min: 0,
      max: 200,
      interval: 40,
      splitLine: {show: false}, // grid 区域中的分隔线
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      }
    },
    series: [
      {
        name: '',
        type: 'bar',
        barWidth: 20,
        //data: [180, 120, 80, 100, 150, 120, 160],
        data: [{
          name: '采集设备',
          value: 180
        },{
          name: '传感器-天气',
          value: 120
        },
        {
          name: '传感器-电力',
          value: 80
        },{
          name: '灯光控制器',
          value: 100
        },{
          name: '空调控制器',
          value: 150
        },{
          name: '其他传感器',
          value: 160
        }],
        itemStyle: {
          normal:{  
            color: function (params){
              var colorList = ['#edd54d','#beff65','#43ff65','#fa9f42','#00dae5','#4faff8',];
              return colorList[params.dataIndex];
            }
          }
        }
      }
    ]
  };
  myChart.setOption(option);
}

